<script setup lang="ts">
import { openContextMenuX, notify, type ContextMenuEntry } from '@/widgets'

const menus: ContextMenuEntry[] = [
  {
    icon: 'mas-icon-Waypoint',
    text: 'AB1',
    children: [
      {
        text: 'AB1-1',
        onClick() {
          notify.info({ content: 'AB1-1' })
        }
      },
      {
        icon: 'mas-icon-model',
        text: 'AB1-2-0'
      },
      {
        text: 'AB1-2',
        onClick() {
          notify.info({ content: 'AB1-2' })
        }
      },
      {
        text: 'AB1-3',
        onClick() {
          notify.info({ content: 'AB1-3' })
        }
      }
    ]
  },
  {
    icon: 'mas-icon-Waypoint',
    text: 'AB2',
    children: [
      {
        icon: 'mas-icon-Block',
        text: 'AB2-1',
        children: [
          {
            text: 'AB1-1',
            onClick: () => notify.success({ content: 'AB1-1' })
          },
          {
            text: 'AB1-2',
            onClick: () => notify.success({ content: 'AB1-2' })
          },
          {
            text: 'AB1-3',
            onClick: () => notify.success({ content: 'AB1-3' })
          }
        ]
      },
      {
        text: 'AB2-2',
        onClick: () => notify.success({ content: 'AB2-2' })
      },
      {
        text: 'AB2-3',
        onClick: () => notify.success({ content: 'AB2-3' })
      }
    ]
  },
  '-',
  'routing',
  {
    icon: 'mas-icon-Routing',
    text: 'AB3',
    children: [
      {
        text: 'AB3-1',
        onClick: () => notify.warn({ content: 'AB3-1', icon: 'mas-icon-Routing' })
      },
      {
        text: 'AB3-2',
        onClick: () => notify.warn({ content: 'AB3-2', icon: 'mas-icon-Routing' })
      },
      {
        text: 'AB3-3',
        onClick: () => notify.warn({ content: 'AB3-3', icon: 'mas-icon-Routing' })
      }
    ]
  },
  {
    icon: 'mas-icon-Routing',
    text: 'AB4',
    children: [
      {
        text: 'AB3-1',
        onClick: () => notify.error({ content: 'AB3-1', icon: 'mas-icon-Routing' })
      },
      {
        text: 'AB3[Routing]-2',
        onClick: () => notify.error({ content: 'AB3[Routing]-2', icon: 'mas-icon-Routing' })
      },
      {
        text: 'AB3-3',
        onClick: () => notify.error({ content: 'AB3-3', icon: 'mas-icon-Routing' })
      }
    ]
  },
  {
    icon: 'mas-icon-Routing',
    text: 'AB5#1',
    children: [
      {
        text: 'AB3-1',
        onClick: () => notify.info({ content: 'AB3-1', icon: 'mas-icon-Routing' })
      },
      {
        text: 'AB3-2',
        onClick: () => notify.info({ content: 'AB3-2', icon: 'mas-icon-Routing' })
      },
      {
        text: 'AB3-3',
        onClick: () => notify.info({ content: 'AB3-3', icon: 'mas-icon-Routing' })
      }
    ]
  },
  {
    icon: 'mas-icon-ATCSector',
    text: 'ABSD',
    onClick: () => notify.info({ content: 'ABSD', icon: 'mas-icon-ATCSector' })
  },
  {
    icon: 'mas-icon-Aircraft',
    text: 'Acft',
    onClick: () => notify.info({ content: 'Acft', icon: 'mas-icon-Aircraft' })
  }
]

function onClick(evt: MouseEvent) {
  openContextMenuX(menus, evt, { maxHeight: 300 })
}
</script>
<template>
  <div class="context-menu-example" @click="onClick($event)">
    <div><strong>请点击显示菜单</strong></div>
  </div>
</template>
<style lang="scss">
@import '@/widgets/var';
.context-menu-example {
  width: 40em;
  height: 30em;
  padding: 1em;
  background-color: $background;
}
</style>
